<template>
    <div class="blockcheinInfo">
        <div class="item">
            <div class="left-box">
            <div class="tit">{{ tradeInfo.contract? tradeInfo.contract : 'BTC_USDT' }}</div>
            <div class="sub">永续</div>
            </div>
            <div class="last" :style="{ color:parseFloat(tradeInfo.last)- parseFloat(tradeInfo.mark_price)>0 ? '#e74c3c' : '#2ecc71' }">
            <el-icon><CaretTop v-if="parseFloat(tradeInfo.last)- parseFloat(tradeInfo.mark_price)>0"/><CaretBottom v-else/></el-icon> 
            {{ tradeInfo.last ? parseFloat(tradeInfo.last).toLocaleString('en-US') : 0 }}
            </div>
            <div class="trandInfo">
            <div class="item">
                <div class="tit">标记价格</div>
                <div class="num">
                <el-text class="mx-1" size="large" :type="symbol?'danger':'success'">{{ tradeInfo.mark_price ? tradeInfo.mark_price : 0 }}</el-text>
                </div>
            </div>
            <div class="item">
                <div class="tit">涨跌幅度</div>
                <div class="num" :class="{ positive: parseFloat(tradeInfo.change_percentage) > 0, negative: tradeInfo.change_percentage < 0 }">
                    {{ tradeInfo.change_percentage ? tradeInfo.change_percentage : 0 }}
                </div>
            </div>
            <div class="item">
                <div class="tit">24H最高价</div>
                <div class="num">{{ tradeInfo.high_24h ? tradeInfo.high_24h : 0 }}</div>
            </div>
            <div class="item">
                <div class="tit">24H最低价</div>
                <div class="num">{{ tradeInfo.low_24h ? tradeInfo.low_24h : 0 }}</div>
            </div>
            <div class="item">
                <div class="tit">资金费率</div>
                <div class="num">{{ tradeInfo.funding_rate ? (tradeInfo.funding_rate*100)+'%' : 0 }}</div>
            </div>
            <div class="item">
                <div class="tit">24H交易量</div>
                <div class="num">{{ tradeInfo.volume_24h_base ? tradeInfo.volume_24h_base : 0 }}</div>
            </div>
            </div>

        </div>
        <div class="item">
            <div class="left-box">
            <div class="tit">当前账号</div>
            <div class="sub">{{ 'master' }}</div>
            </div>
            <div class="trandInfo">
                <div class="item bottom">
                    <div class="tit">24小时交易量(USDT)</div>
                    <div class="num">
                    <el-text class="mx-1" size="large" type="primary">{{ tradeInfo.volume_24h_quote ? parseFloat(tradeInfo.volume_24h_quote ).toFixed(2).toLocaleString('en-US')  : 0 }}</el-text>
                    </div>
                </div>
                <div class="item bottom">
                    <div class="tit">索引价格</div>
                    <div class="num">
                    <el-text class="mx-1" size="large" type="primary">{{ tradeInfo.index_price ? parseFloat(tradeInfo.index_price).toFixed(2).toLocaleString('en-US')  : 0 }}</el-text>
                    </div>
                </div>
                <div class="item bottom">
                    <div class="tit">当前的最低卖价</div>
                    <div class="num">
                    <el-text class="mx-1" size="large" type="primary">{{ tradeInfo.lowest_ask ? parseFloat(tradeInfo.lowest_ask).toFixed(2).toLocaleString('en-US')  : 0 }}</el-text>
                    </div>
                </div>
                <div class="item bottom">
                    <div class="tit">当前的最高买价</div>
                    <div class="num">
                    <el-text class="mx-1" size="large" type="primary">{{ tradeInfo.highest_bid ? parseFloat(tradeInfo.highest_bid).toFixed(2).toLocaleString('en-US')  : 0 }}</el-text>
                    </div>
                </div>
                <!-- <div class="item bottom">
                    <div class="tit">推荐限价</div>
                    <div class="num">
                    <el-text class="mx-1" size="large" type="primary">{{ msaterInfo.details.options ? parseFloat(tradeInfo.highest_bid-tradeInfo.lowest_ask).toFixed(2).toLocaleString('en-US') : 0 }}</el-text>
                    </div>
                </div> -->
            </div>

        </div>
    </div>
</template>

<script setup>
import { defineProps, ref ,watch,inject,computed} from 'vue';

const props = defineProps({
    tradeInfo: {
        type: Object,
        default:() => {},
    },
    msaterInfo: {
        type: Object,
        default: () => {},
    },
    uptemplate: {
        type: Boolean,
        default: false,
    },
});
// 使用 inject 函数来接收数据
const tradeInfo = inject('tradeInfo');
const symbol = ref(false); // true 代表涨，false 代表跌
const lastPrice = ref(null); // 存储上一次价格

watch(() => tradeInfo.value.mark_price, (newVal, oldVal) => {
    if (lastPrice.value !== null) { // 确保不是第一次赋值
        symbol.value = newVal > lastPrice.value; // 如果新值大于旧值，则为涨
    }
    lastPrice.value = newVal; // 更新上一次价格
}, { immediate: true });

</script>

<style lang="scss" scoped>
.blockcheinInfo{
  min-width: 1120px;
  background-color: white;
  border-radius: 6px;
  height: 165px;
  padding-top: 10px;
  .item{
    width: 100%;
    height: 45%;
    .left-box{
      float: left;
      width: 140px;
      height: 100%;
      line-height: 40px;
      text-align: center;
      border-right: 1px solid rgba(138, 198, 249, 0.539);
      .tit{
        font-size: 18px;
        font-weight: 600;
      }
      .sub{
        font-size: 14px;
        color: rgb(134, 164, 190);
        line-height: 30px;
      }
    }
    .last{
      float: left;
      width: 150px;
      height: 100%;
      font-size: 20px;
      text-align: center;
      line-height: 70px;
      font-weight: 600;
      font-family:Arial, Helvetica, sans-serif;
    }
    .trandInfo{
      width: 65%;
      height: 100%;
      float: left;
      .item{
        width: 100px;
        float: left;
        text-align: center;
        color: rgb(117, 117, 118);
        .tit{
          font-size: 14px;
          line-height: 30px;
        }
        .num{
          font-size: 18px;
          font-weight: 600;
          line-height: 30px;
        }
        .positive {
            color: #d32f2f;  /* 绿色 */
        }
        .negative {
            color: #00c853;  /* 红色 */
        }
      }
      .bottom{
        width: 135px;
        margin-left: 10px;
        color: gray;
      }
    }

  }


}
</style>